<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>点击显示密码</title>
    <style type="text/css">
    .container{
        margin: 10px auto;
        width: 80%;
        border: 1px red solid;
    }
</style>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div class="container">
        <form class="test-form">
            <table>
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="username"/></td>
                    <td><font color="green">该用户名可以使用</font></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input v-bind:class="{ abc: isActive }" v-bind:style="styleObject" v-bind:type="inputType" name="password"/></td>
                    <td><button type="button" v-on:mousedown="showText" v-on:mouseup="showText">显示密码</button></td>
                </tr>
                <tr>
                    <td><button type="button">提交</button></td>
                    <td><button type="reset">重新填写</button></td>
                    <td></td>
                </tr>
            </table>
        </form>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: ".test-form",
            data:{
                isActive: true,
                inputType: "password",
                styleObject: {
                    color: 'green',
                    fontSize: '30px'
                }
            },
            methods: {
                showText: function() {
                    this.inputType = this.inputType === "text" ? "password" : "text";
                }
            }
        });
    </script>
</body>
</html>